<script setup lang="ts" name="info">
import { getInfo, editUserInfo, updatePwd, profileAvatar } from '@@/apis/info/index'
import { ref, onMounted } from 'vue'
import type { TabsPaneContext, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router"
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const ruleFormRefPwd = ref<FormInstance>()
const activeName = ref('1')
const avatarUrl = ref('')
const formData = ref({
  userName: '',
  phonenumber: '',
  email: '',
  sex: '',
  avatar: '',
  deptName: '',
  createTime: '',
  otherInfo: ''
})
// 密码
const formPwd = ref({
  oldPassword: '',
  newPassword: '',
})
const rules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符之间', trigger: 'blur' }
  ],
  phonenumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
  ]
}
const rulesPwd = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 5, max: 16, message: "长度在 5 到 16 个字符", trigger: "blur" }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 5, max: 16, message: "长度在 5 到 16 个字符", trigger: "blur" }
  ],
}


// 获取用户信息
const getUserInfoList = () => {
  getInfo().then((res: any) => {
    formData.value = res.user
    if (res.user.avatar) {
      avatarUrl.value = res.user.avatar ? `/model-api${res.user.avatar}` : ''
    }
  })
}
// 修改用户信息
const keep = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 修改用户信息
  await formEl.validate((valid, fields) => {
    if (valid) {
      editUserInfo(formData.value).then((res: any) => {
        ElMessage.success('修改成功')
        getUserInfoList()
      })
    } else {
    }

  })
}

// 修改密码
const keepPwd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updatePwd(formPwd.value).then((res: any) => {
        ElMessage.success('修改成功')
        getUserInfoList()
      })
    } else {
    }
  })

}
// 取消
const back = () => {
  router.back()
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
}

const beforeAvatarUpload = (file: any) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
    return false;
  }
  const fd = new FormData()
  fd.append('avatarfile', file)
  profileAvatar(fd).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('上传成功')
      getUserInfoList()
    }
  })
  return true;
}
onMounted(() => {
  getUserInfoList()
})
</script>
<template>
  <div class="app-container">
    <div class="app-container-content custom-container-top">
      <div class="info-main-title">
        <div class="info-main-title-top">
          <img src="@@/assets/images/info/icon_gerenziliao.png" alt="">
          <span>个人资料</span>
        </div>
      </div>
      <!-- 个人资料 -->
      <el-row style="margin-top: 20px;">
        <!-- 头像部分 -->
        <el-col :span="2">
          <div class="info-main-content">
            <el-upload class="upload" action="http://localhost:3000/model-api/user/profile/avatar"
              :show-file-list="false" :before-upload="beforeAvatarUpload">
              <img v-if="avatarUrl" :src="avatarUrl" class="info-main-img" />
              <div class="info-main-img" title="点击上传头像" v-else>
                <img src="@@/assets/images/info/info-touxiang.png" alt="头像" />
              </div>
            </el-upload>
          </div>
        </el-col>

        <el-col :span="20">
          <el-row class="red-box">
            <el-col :span="8">
              <div class="info-main-title">
                <div class="info-main-title-top">
                  <img src="@@/assets/images/info/icon_denglumingcheng.png" alt="">
                  <span>登录名称</span>
                </div>
                <div class="info-main-describe-top">{{ formData.userName }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-main-title">
                <div class="info-main-title-top">
                  <img src="@@/assets/images/info/icon_dianhua.png" alt="">
                  <span>手机号码</span>
                </div>
                <div class="info-main-describe-top">{{ formData.phonenumber }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-main-title">
                <div class="info-main-title-top">
                  <img src="@@/assets/images/info/icon_bumen.png" alt="">
                  <span>所属部门</span>
                </div>
                <div class="info-main-describe-top">{{ formData.deptName }}</div>
              </div>
            </el-col>
          </el-row>

          <el-row style="margin-top: 32px;" x>
            <el-col :span="8">
              <div class="info-main-title">
                <div class="info-main-title-top">
                  <img src="@@/assets/images/info/icon_youjian.png" alt="">
                  <span>邮箱地址</span>
                </div>
                <div class="info-main-describe-top">{{ formData.email }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-main-title">
                <div class="info-main-title-top">
                  <img src="@@/assets/images/info/icon_time.png" alt="">
                  <span>创建时间</span>
                </div>
                <div class="info-main-describe-top">{{ formData.createTime }}</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 基本资料 -->
    <div class="app-container-content custom-container-bottom">
      <div class="info-main-title">
        <div class="info-main-title-top">
          <img src="@@/assets/images/info/icon_jibenziliao.png" alt="">
          <span>基本资料</span>
        </div>
      </div>
      <div style="height: calc(100vh - 450px); min-height: 300px;">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 26px;">
          <el-tab-pane label="修改信息" name="1">
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="80px">
              <el-form-item label="登录名称" prop="userName">
                <el-input v-model="formData.userName" placeholder="请输入登录名称" class="custom-input" />
              </el-form-item>
              <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="formData.phonenumber" placeholder="请输入手机号码" class="custom-input" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="请输入邮箱" class="custom-input" />
              </el-form-item>
              <el-form-item label="其他信息">
                <el-input v-model="formData.otherInfo" placeholder="其他信息" class="custom-input" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="2">
            <el-form :model="formPwd" ref="ruleFormRefPwd" :rules="rulesPwd" label-width="72px">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="formPwd.oldPassword" show-password autocomplete="new-password" type="password" placeholder="请输入旧密码" class="custom-input" />
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="formPwd.newPassword" show-password autocomplete="new-password" type="password" placeholder="请输入新密码" class="custom-input" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="operate" v-if="activeName === '1'">
        <el-button type="primary" @click="keep(ruleFormRef)">保 存</el-button>
        <el-button @click="back">退 出</el-button>
      </div>
      <div class="operate" v-else>
        <el-button type="primary" @click="keepPwd(ruleFormRefPwd)">保 存</el-button>
        <el-button @click="back">退 出</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-container-top {
  width: 100%;
  height: 245px;
  background: #031527;
  border-radius: 0px 0px 0px 0px;
  padding: 16px;
}

.info-main-title {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.info-main-title-top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-main-describe-top {
  margin-left: 21px;
}

.info-main-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-main-img {
  width: 60px;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 60px;
  border-radius: 30px;
  text-align: center;
}

.custom-container-bottom {
  margin-top: 12px;
  width: 100%;
  background: #031527;
  border-radius: 0px 0px 0px 0px;
  padding: 16px;
  min-height: 400px;
  height: calc(100vh - 356px);
}

.custom-input {
  width: 350px;
}

.operate {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

:deep(.el-tabs__item.is-active) {
  color: #00f3c7;
}

:deep(.el-tabs__item:hover) {
  color: #00f3c7 !important;
}

:deep(.is-active:hover) {
  color: #00f3c7 !important;
}

:deep(.el-tabs__active-bar) {
  background-color: #00f3c7;
}
</style>
